import { DownOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Popover, Radio, Typography } from 'antd';
import React, { useState } from 'react';
import styles from './index.less';

const { Paragraph } = Typography;
type SizeType = 'all' | 'small' | 'middle' | 'large';

const Index: React.FC = () => {
  const [size, setSize] = useState<SizeType>('small');
  const onChange = () => {};

  const content = (
    <div className={styles.addSelect}>
      <p onClick={() => window.open('/admin/articlemanage/articles/add')}>新建书籍</p>
      <p>新建分类</p>
    </div>
  );
  return (
    <div className={styles.bookstoreWrapper}>
      <div className={styles.classification}>
        <Radio.Group value={size} onChange={onChange}>
          <Radio.Button value="all">全部</Radio.Button>
          <Radio.Button value="small">后端</Radio.Button>
          <Radio.Button value="middle">前端</Radio.Button>
          <Radio.Button value="large">IOS</Radio.Button>
        </Radio.Group>
        <Popover placement="bottomLeft" content={content} className={styles.add}>
          <Button className={styles.addBtn}>
            <PlusOutlined className={styles.addIcon} />
            <DownOutlined className={styles.addIcon} />
          </Button>
        </Popover>
      </div>
      <div className={styles.bookList}>
        <div className={styles.bookItem} onClick={() => window.open('/bookHome/view/1')}>
          <img
            src="https://p26-passport.byteacctimg.com/img/user-avatar/71aa1c090fb874f351bb0f430d8cbbda~40x40.awebp"
            className={styles.bookCover}
          />
          <div className={styles.rightContent}>
            <div className={styles.titleeWrapper}>
              <div className={styles.label}>未发布</div>
              <div className={styles.title}>深入浅出的微前端</div>
            </div>
            <Paragraph ellipsis={{ rows: 2, expandable: false }}>
              我是一个很差很差很差的文本我是一个很差很差很差的文本我是一个很差很差很差的文本我是一个很差很差很差的文本我是一个很差很差很差的文本我是一个很差很差很差的文本我是一个很差很差很差的文本我是一个很差很差很差的文本我是一个很差很差很差的文本
            </Paragraph>
            <div className={styles.authorWrapper}>
              <img
                src="https://p26-passport.byteacctimg.com/img/user-avatar/71aa1c090fb874f351bb0f430d8cbbda~40x40.awebp"
                className={styles.profilePhoto}
              />
              <div>小小致命伤</div>
              <div className={styles.tabs}>
                <p>JavaScript</p>
                <p>css</p>
                <p>redux</p>
              </div>
            </div>
            <div className={styles.bookAttribute}>
              <div>已更新13小结</div>
              <div>1355人收藏</div>
            </div>
            {/* <MyCarousel listData={[123, 456, 789, 1110]} /> */}
          </div>
        </div>
        <div className={styles.bookItem}>
          <img
            src="https://p26-passport.byteacctimg.com/img/user-avatar/71aa1c090fb874f351bb0f430d8cbbda~40x40.awebp"
            className={styles.bookCover}
          />
          <div className={styles.rightContent}>
            <div className={styles.titleeWrapper}>
              <div className={styles.label}>未发布</div>
              <div className={styles.title}>深入浅出的微前端</div>
            </div>
            <Paragraph ellipsis={{ rows: 2, expandable: false }}>
              我是一个很差很差很差的文本我是一个很差很差很差的文本我是一个很差很差很差的文本我是一个很差很差很差的文本我是一个很差很差很差的文本我是一个很差很差很差的文本我是一个很差很差很差的文本我是一个很差很差很差的文本我是一个很差很差很差的文本
            </Paragraph>
            <div className={styles.authorWrapper}>
              <img
                src="https://p26-passport.byteacctimg.com/img/user-avatar/71aa1c090fb874f351bb0f430d8cbbda~40x40.awebp"
                className={styles.profilePhoto}
              />
              <div>小小致命伤</div>
              <div className={styles.tabs}>
                <p>JavaScript</p>
                <p>css</p>
                <p>redux</p>
              </div>
            </div>
            <div className={styles.bookAttribute}>
              <div>已更新13小结</div>
              <div>1355人收藏</div>
            </div>
            {/* <MyCarousel listData={[123, 456, 789, 1110]} /> */}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Index;
